<template>
  <h1>接收方</h1>
  <el-row :gutter="20">
      <el-col :span="3">
          <el-select v-model="valueId" clearable placeholder="请选择">
              <el-option
                v-for="item in dataId"
                :key="item[0]"
                :label="item[0]"
                :value="item[0]">
              </el-option>
            </el-select>
      </el-col>
      <el-col :span="3">
          <div class="block">
              <el-date-picker style="width: 200px;"
                v-model="value1"
                @blur="daterangeSj"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
      </el-col>
      <el-col :span="2">
          <el-button @click="handleChange()">查询</el-button>
      </el-col>
  </el-row>
  <el-row>
      <el-col :span="12">
          <div id="echart-line" :style="{width: '600px', height: '250px'}"></div>
      </el-col>
      <el-col :span="12">
          <div id="echart-line2" :style="{width: '600px', height: '250px'}"></div>
      </el-col>
    </el-row>
</template>


<script>
  export default {
  data() {
      return {
          name:'接收方',
          //流量
          xDatall: [],
          yDatall: [],
          //速率
          xDatasl: [],
          yDatasl: [],
          dataId: [],
          valueId:'',
          value1: '',
          start_time:'',
          end_time:''
      };
  },
  methods: {
      daterangeSj(){
          var starttime = (this.value1[0]).valueOf(); // 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值
           var endtime = (this.value1[1]).valueOf();
           //精确到秒
           this.start_time = starttime.toString().substr(0,10);
           this.end_time = endtime.toString().substr(0,10);
      },
      handleChange(){
          this.start_time = Date.parse(new Date(new Date().setHours(0, 0, 0, 0))).toString().substr(0,10),
          this.end_time = Date.parse(new Date(new Date().setHours(23, 59, 59, 59))).toString().substr(0,10),

          this.showTable(this.valueId,this.start_time,this.end_time)
      },
      addini(){
          var id = []
          var ll = []
          this.axios({url:"http://192.168.90.74:5000/get_traffic?flag=2"}).then((res)=>{
              res.data.data.forEach(function(item,index,data){
                  id.push(data[index][0])
                  ll.push(data[index][1])
              })
              console.log(id,ll)
              this.xDatall = id
               //流量
               ll.forEach(function(item,index,data){
                  var flow = data[index]
                  ll[index] = (flow / (1024 * 1024)).toFixed(3)
               })
              this.yDatall = ll
              this.initChart2('流量',this.xDatall,this.yDatall)
    }).catch(()=>{})

      },
      addiniD(){
          this.axios({url:"http://192.168.90.74:5000/get_newIds?flag=2"}).then((res)=>{
                 this.dataId = res.data.data
                 this.valueId = res.data.data[0]

                 this.showTable(this.valueId,Date.parse(new Date(new Date().setHours(0, 0, 0, 0))).toString().substr(0,10),Date.parse(new Date(new Date().setHours(23, 59, 59, 59))).toString().substr(0,10))
    }).catch(()=>{})
      },
      //
      showTable(valueId,starttime,endtime){
          var speed = []
          var dateTm = []
          //接收方
          this.axios({url:"http://192.168.90.74:5000/get_speed?id=" +valueId+ "&flag=2"+"&start_time="+ starttime +"&end_time="+endtime}).then((res1)=>{
              console.log(res1,"接收方")
              if(res1.data.code != 500){
                    res1.data.data.forEach(function(item,index,data){
                        speed.push(parseFloat(data[index][2] / 1024).toFixed(3))
                        dateTm.push(data[index][1])
                    })
                }
              this.initChart('速率',dateTm,speed)      
          }).catch(()=>{})
      },
      initChart(name,xData,yData) {
          console.log(xData,yData)
              let getchart = this.$echarts.init(document.getElementById('echart-line'));
              var  option = {
                  tooltip: {
                      trigger: 'axis'
                  },
                  legend: {
                      data: [name],
                      bottom:'0%'
                  },
                  grid: { //调整图表上下左右位置
                      top:'10%',
                      left: '3%',
                      right: '8%',
                      bottom: '11%',
                      containLabel: true
                      
                  },
                  
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: xData
                  },
                  yAxis: {
                      type: 'value',
                      min:0,
                      axisLine: {
                          show: true
                      },
                      splitLine: {
                          lineStyle: {
                              color: "#CCCCCC",
                              width: 1
                          }
                      },
                      axisLabel: {
                          formatter: '{value} mbps'
                      }
                  },
                  series: [
                      {
                          name: name,
                          type: 'line',
                          stack: '总量',
                          data: yData
                      },
                  ]
              };

              getchart.setOption(option);
              //随着屏幕大小调节图表
                  window.addEventListener("resize", () => {
                      getchart.resize();
                  });
              },
              initChart2(name,xData,yData) {
              let getchart2 = this.$echarts.init(document.getElementById('echart-line2'));
              var  option = {
                  tooltip: {
                      trigger: 'axis'
                  },
                  legend: {
                      data: [name],
                      bottom:'0%'
                  },
                  grid: { //调整图表上下左右位置
                      top:'10%',
                      left: '3%',
                      right: '8%',
                      bottom: '11%',
                      containLabel: true
                  },
                  
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: xData,
                  },
                  yAxis: {
                      type: 'value',
                      min:0,
                      axisLine: {
                          show: true
                      },
                      splitLine: {
                          lineStyle: {
                              color: "#CCCCCC",
                              width: 1
                          }
                      },
                      axisLabel: {
                          formatter: '{value} MB'
                      }
                  },
                  series: [
                      {
                          name: name,
                          type: 'bar',
                          stack: '总量',
                          data: yData,
                          barWidth : 10, //柱图宽度
                      },
                  ]
              };

              getchart2.setOption(option);
              //随着屏幕大小调节图表
                  window.addEventListener("resize", () => {
                      getchart2.resize();
                  });
              },
  },
  mounted(){
     this.addini()
     this.addiniD()

  }
  };
</script>
